@extends('public.father')

@section('css')

    <link href="/templates/hd/assets/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="/templates/hd/assets/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="/templates/hd/assets/css/personal.css" rel="stylesheet" type="text/css">
    <link href="/templates/hd/assets/css/stepstyle.css" rel="stylesheet" type="text/css">

@endsection


@section('script')


    <script type="text/javascript" src="/templates/hd/assets/js/jquery-1.7.2.min.js"></script>
    <script src="/templates/hd/assets/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    @endsection

@section('content')
<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
</div>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">绑定邮箱</strong> / <small>Email</small></div>
            </div>
            <hr/>
            <!--进度条-->
            <div class="m-progress">
                <div class="m-progress-list">
							<span class="step-1 step">
                                <em class="u-progress-stage-bg"></em>
                                <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                                <p class="stage-name">验证邮箱</p>
                            </span>
                    <span class="step-2 step">
                                <em class="u-progress-stage-bg"></em>
                                <i class="u-stage-icon-inner">2<em class="bg"></em></i>
                                <p class="stage-name">完成</p>
                            </span>
                    <span class="u-progress-placeholder"></span>
                </div>
                <div class="u-progress-bar total-steps-2">
                    <div class="u-progress-bar-inner"></div>
                </div>
            </div>
            <form class="am-form am-form-horizontal" action="{{route('huanbang')}}" method="post">
                @csrf
                <div class="am-form-group">
                    <label for="user-email" class="am-form-label">验证邮箱</label>
                    <div class="am-form-content">
                        <input type="email" name="email" value="{{$email['email']}}" id="user-email" placeholder="请输入邮箱地址">
                    </div>
                </div>
                <div class="am-form-group code">
                    <label for="user-code" class="am-form-label">验证码</label>
                    <div class="am-form-content">
                        <input type="tel" name="code" id="user-code" placeholder="验证码">
                    </div>
                    <a class="btn" href="javascript:void(0);" id="sendMobileCode">
                        <div class="am-btn am-btn-danger">验证码</div>
                    </a>
                </div>
                <div class="info-btn">
                    <button type="submit" class="am-btn am-btn-danger">保存修改</button>
                </div>

            </form>

        </div>

    </div>

    <script>
        $('#sendMobileCode').click(function () {
            // alert(123);
            // 思想:ajax发异步到后台触发一个方法使得调用一个方法，用于发验证码
            // alert(123);
            var email = $('#user-email').val();
            // alert(email);
            $.ajax({
                url:'/yzm',
                type:'post',
                data:email,
                dataType:'jsom',
                success:function (res) {
                    alert(res)
                }
            })

        })
    </script>


    @include('public.aside')

</div>
@endsection
